<script lang="ts" setup>
import { ref } from 'vue'

const props = withDefaults(defineProps<{
  columns: Array<{
    key: string
    name: string
    show: boolean
  }>
}>(), {})

const emit = defineEmits<{
  (e: 'columnChange', checkedList: string[]): void
}>()

const visible = ref(false)

const checkList = ref(props.columns.map(item => item.name))

function show() {
  visible.value = true
}

function handleSubmit() {
  emit('columnChange', checkList.value)
  visible.value = false
}

defineExpose({
  show,
})
</script>

<template>
  <el-dialog
    v-model="visible"
    title="自定义列表项"
    width="700px"
  >
    <el-checkbox-group v-model="checkList" class="checkbox-group">
      <el-checkbox
        v-for="(column, index) in columns"
        :key="index"
        :label="column.name"
        class="checkbox-item"
      />
    </el-checkbox-group>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.checkbox-group {
  display: flex;
  flex-wrap: wrap;

  .checkbox-item {
    width: 25%;
    margin-right: 0;
  }
}
</style>
